<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/video-js.css">
  <link rel="stylesheet" href="css/font.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/layer.css">
  <script src="js/flexible.js"></script>
</head>
<body>
  <div id="app">
    <!-- edu-header -->
    <div class="edu-header">
      <div class="edu-header-info">
        <div class="weather">
          <div class="weather-text">晴转多云 20/11</div>
          <div class="weather-ico"></div>
        </div>
        <div class="date">10月20日 周五 农历九月初一</div>
      </div>
    </div>
    <!-- /edu-header -->
    <!-- edu-main -->
    <div class="edu-main header-through nav-through">
      <div class="edu-video-detail active">
        <div class="edu-carousel">
          <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" poster="./img/MY_VIDEO_POSTER.png" data-setup="{}"></video>
        </div>
        <!-- edu-video-control -->
        <div class="edu-video-control">
          <!-- 播放暂停按钮 -->
          <div class="edu-video-control-play-btn" id='player-play'></div>
          <div class="edu-video-control-stop-btn" style="display: none;" id='player-pause'></div>
          <!-- 已播放时间 -->
          <div class="edu-video-control-time-play" id='player-play-time'>00:00:00</div>
          <!-- /进度条 -->
          <div class="edu-video-control-progress">
            <div class="edu-video-control-progress-bar" id='player-progress'>
              <div class="edu-video-control-progress-dot"></div>
            </div>
          </div>
          <!-- 剩余时间 -->
          <div class="edu-video-control-time-over" id='player-over-time'>00:00</div>
          <!-- 放大音量 -->
          <div class="edu-video-control-soundUp" id='player-up-sound'></div>
          <!-- 减小音量 -->
          <div class="edu-video-control-soundDown" id='player-down-sound'></div>
        </div>
        <!-- /edu-video-control -->
        <div class="edu-vessel">
          <div class="edu-vessel-inner">
            <div class="tr">
              <div class="edu-switch" id='video-detail-switch'>
                <div class="edu-switch-item">相关<i>相关</i></div>
                <div class="edu-switch-item active">推荐<i>推荐</i></div>
              </div>
            </div>
            <div class="swiper-container" id='video-detail-page' style="height: 4.1rem;"> 
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="swiper-container has-progress-swiper" id='video-detail-relative'>
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <div class="edu-thumbnail-wrap">
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="edu-thumbnail-wrap">
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- <div class="swiper-scrollbar edu-scrollbar"></div> -->
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="swiper-container has-progress-swiper" id='video-list-recommend'>
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <div class="edu-thumbnail-wrap">
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="edu-thumbnail-wrap">
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                          <div class="edu-thumbnail" data-video-id='1'>
                            <div class="edu-thumbnail-preview">
                              <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                            </div>
                            <h4>宝迪英语学堂</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- <div class="swiper-scrollbar edu-scrollbar"></div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <!-- /edu-main -->
    <!-- edu-nav -->
    <div class="edu-nav">
      <a href="index.html" class="edu-nav-link active">首页<i>首页</i></a>
      <a href="news.html" class="edu-nav-link">新闻<i>新闻</i></a>
      <a href="video.html" class="edu-nav-link">视频<i>视频</i></a>
      <a href="record.html" class="edu-nav-link">记录<i>记录</i></a>
      <a href="#" class="edu-nav-link back">返回<i>返回</i></a>
    </div>
    <!-- /edu-nav -->
  </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/video.min.js"></script>
<script src="js/layer.js"></script>
<script>
  
  $.support = (function() {
      var support = {
          touch: !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch)
      }

      return support
  })()

  $.touchEvents = {
      start: $.support.touch ? 'touchstart' : 'mousedown',
      move: $.support.touch ? 'touchmove' : 'mousemove',
      end: $.support.touch ? 'touchend' : 'mouseup'
  }
  
  $.getTranslate = function(el, axis) {
    var matrix, curTransform, curStyle, transformMatrix

    // automatic axis detection
    if (typeof axis === 'undefined') {
      axis = 'x'
    }

    curStyle = window.getComputedStyle(el, null)
    if (window.WebKitCSSMatrix) {
      // Some old versions of Webkit choke when 'none' is passed pass
      // empty string instead in this case
      transformMatrix = new WebKitCSSMatrix(curStyle.webkitTransform === 'none' ? '' : curStyle.webkitTransform)
    } else {
      transformMatrix = curStyle.MozTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,')
      matrix = transformMatrix.toString().split(',')
    }

    if (axis === 'x') {
      //Latest Chrome and webkits Fix
      if (window.WebKitCSSMatrix)
        curTransform = transformMatrix.m41
      //Crazy IE10 Matrix
      else if (matrix.length === 16)
        curTransform = parseFloat(matrix[12])
      //Normal Browsers
      else
        curTransform = parseFloat(matrix[4])
    }

    if (axis === 'y') {
      //Latest Chrome and webkits Fix
      if (window.WebKitCSSMatrix)
        curTransform = transformMatrix.m42
      //Crazy IE10 Matrix
      else if (matrix.length === 16)
        curTransform = parseFloat(matrix[13])
      //Normal Browsers
      else
        curTransform = parseFloat(matrix[5])
    }

    return curTransform || 0
  }

  var videoPlayer = videojs('my-video', {
    controls: false
  })
  
  // 视频播放控制
  ;(function(player) {
    
    player.on('loadstart', function () {
      $('.video-js').css({
        opacity: 1
      })
    })

    var $play       = $('#player-play'),
        $pause      = $('#player-pause'),
        $playTime   = $('#player-play-time'),
        $progressBg = $('.edu-video-control-progress'),
        $progress   = $('#player-progress'),
        $dot        = $('.edu-video-control-progress-dot', $progress),
        $overTime   = $('#player-over-time'),
        $downSound  = $('#player-down-sound'),
        $upSound    = $('#player-up-sound')
    
    var // 声音(0-1)
        sound    = player.volume(),
        // 视频总时长
        duration = 0,
        current  = videoPlayer.currentTime()
    
    // 拖动相关
    var allowDrag    = false,
        isTouched    = false,
        isMoved      = false,
        startX       = 0,
        currentX     = 0,
        startWidth   = '',
        currentWidth = '',
        maxWidth     = $progressBg.width(),
        minLimit     = $progressBg[0].offsetLeft,
        maxLimit     = minLimit + maxWidth,
        dotWidth     = $dot.width()

    $play.on('click', playClickHandler)
    $pause.on('click', pauseClickHandler)
    $downSound.on('click', downSoundHandler)
    $upSound.on('click', upSoundHandler)
    
    player.on('loadedmetadata', loadHandler)
    player.on('timeupdate', updateHandler)
    player.on('play', playHandler)
    player.on('pause', pauseHandler)
    player.on('ended', endedHandler)
    player.on('volumechange', volumechangeHandler)

    $progress.on($.touchEvents.start, progressStartHandler)
    $(document).on($.touchEvents.move, progressMoveHandler)
    $(document).on($.touchEvents.end, progressEndHandler)

    // 点击定位
    $progressBg.on($.touchEvents.start, progressClickHandler)
    
    function playClickHandler (e) {
      e.preventDefault()

      player.play()
    }

    function pauseClickHandler (e) {
      e.preventDefault()

      player.pause()
    }
    
    function downSoundHandler (e) {
      e.preventDefault()
      console.log(sound)
      sound = player.volume()

      if (sound - .1 < 0) {
        return
      }

      sound = parseFloat((sound - .1).toFixed(1))

      player.volume(sound)
    }

    function upSoundHandler (e) {
      e.preventDefault()
      console.log(sound)
 
      sound = player.volume()

      if (sound + .1 > 1) {
        return
      }

      sound = parseFloat((sound + .1).toFixed(1))

      player.volume(sound)
    }
    
    function loadHandler (e) {
      duration = videoPlayer.duration()
      allowDrag = true

      $overTime.text(duration.toTime())
    }

    function updateHandler (e) {
      duration = videoPlayer.duration()
      current = videoPlayer.currentTime()

      if (isNaN(duration) || typeof duration !== 'number') {
        return
      }

      console.log(duration)

      $overTime.text(duration.toTime())
      $playTime.text(current.toTime())
      
      $progress.css({
        width: (current / duration * 100).toFixed(2) + '%'
      })
    }

    function playHandler (e) {
      $pause.show()
      $play.hide()
    }

    function pauseHandler (e) {
      $pause.hide()
      $play.show()
    }

    function endedHandler (e) {
      $play.show()
      $pause.hide()
    }

    function volumechangeHandler (e) {
      // layer.msg('音量 : ' + parseInt(player.volume() * 10) || '0')
    }

    function progressStartHandler (e) {
      console.log('start')

      if (!allowDrag) {
        return
      }

      if (isMoved || isTouched) {
        return
      }

      e.preventDefault()

      isTouched = true
      
      startX = currentX = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageX : e.pageX
      
      allowDrag = true

      startWidth = $progress.width()

      $progress.css({'transitionDuration': '0s'})
      
      player.pause()
    }

    function progressMoveHandler (e) {
      // console.log('move')
      
      if (!isTouched) {
        return
      }

      e.preventDefault()

      allowDrag = false

      currentX = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageX : e.pageX

      currentWidth = currentX - minLimit - dotWidth

      if (currentWidth <= 0) {
        currentWidth = 0
      }
      
      if (currentWidth >= maxWidth) {
        currentWidth = maxWidth
      }

      $progress.width(currentWidth + 'px')

      player.currentTime(Math.round(currentWidth / maxWidth * duration))

    }

    function progressEndHandler (e) {
      if (!isTouched || !isMoved) {
        isTouched = isMoved = false
        allowDrag = true

        return
      }

      isTouched = isMoved = false

      allowDrag = true

      $progress.css({'transitionDuration': '.3s'})

      setTimeout(function() {
        player.play()
      }, 100)
    }

    function progressClickHandler (e) {
      var x = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageX : e.pageX

      currentWidth = x - minLimit - dotWidth
      

      if (currentWidth <= 0) {
        currentWidth = 0
      }
      
      if (currentWidth >= maxWidth) {
        currentWidth = maxWidth
      }

      player.currentTime(Math.round(currentWidth / maxWidth * duration))
      player.play()
    }

    // 动态设置vedio播放路径
    videoPlayer.src('http://211.162.209.172/mp4files/51840000030D1BE8/vjs.zencdn.net/v/oceans.mp4')
    videoPlayer.load('http://211.162.209.172/mp4files/51840000030D1BE8/vjs.zencdn.net/v/oceans.mp4')

  })(videoPlayer)


  bindTab('#video-detail-switch', new Swiper('#video-detail-page', {
    direction: 'vertical',
    allowTouchMove: false,
    spaceBetween: 40
  }))

  hasProgressSwiper('#video-detail-relative', {
    allowTouchMove: false,
  })
  hasProgressSwiper('#video-list-recommend', {
    allowTouchMove: false,
  })
  
  function bindTab(tab, swiper) {
    var $tab = $(tab)

    // bind switch
    $tab.on('click', '.edu-switch-item', function(e) {
      e.preventDefault()

      var $el = $(e.target)

      if (!$el.is('.edu-switch-item')) {
        $el = $el.parents('.edu-switch-item')
      }

      if ($el.hasClass('disabled') || $el.attr('disabled')) {
        return
      }

      $el
        .addClass('active')
        .siblings()
        .removeClass('active')

      swiper.slideTo($el.index())

    })
    
    // bind swiper
    swiper.on('slideChange', function() {
      $tab.find('.edu-switch-item').removeClass('active')
      $tab.find('.edu-switch-item').eq(this.activeIndex).addClass('active')
    })
  }

  // 按钮动画
  $(document).on('click', '.edu-next,.edu-prev,.edu-nav-link', function(e) {

    var $el = $(e.target)

    if (!$el.is('.edu-next,.edu-prev,.edu-nav-link')) {
      $el = $el.parents('.edu-next,.edu-prev,.edu-nav-link')
    }

    $el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
      $el.removeClass('rubberBand')
    }).addClass('animated rubberBand')
  })

  // 有进度条的swiper
  function hasProgressSwiper(el, config) {
    return new Swiper(el, $.extend({
      on: {
        init: function() {
          setTimeout(() => {
            $('<div class="edu-scrollbar-indicator">' + ('第' + (this.activeIndex + 1) + '页\/总' + this.slides.length + '页') + '</div>').appendTo($(this.$el).find('.swiper-scrollbar-drag'))
          }, 0)
        },
        slideChange: function() {
          this.$el.find('.edu-scrollbar-indicator').text('第' + (this.activeIndex + 1) + '页\/总' + this.slides.length + '页')
        }
      }
    }, config || {}))
  }
  
  // 数字转换成时间
  Number.prototype.toTime = function () {
    var number = Math.round(this)

    var hours  = Math.floor(number / 3600),
        minute = Math.floor(number / 60),
        second = number % 60
    
    hours  = hours  < 10 ? '0' + hours  : hours
    minute = minute < 10 ? '0' + minute : minute
    second = second < 10 ? '0' + second : second

    return hours + ':' + minute + ':' + second
  }

</script>
</html>